<template>
  <div id="waihui">
    <split-pane :min-percent="35" :default-percent="datatop" split="horizontal" v-on:resize="resize">
      <template slot="paneL">
        <div class="nav">
          <div class="nav-img">
            <div class="btn-back" @click="gethome()"></div>
            <div class="btn-home" @click="gethome()"></div>
            <!-- <div class="btn-3" @click="$store.commit('set', { isinclass: 3 })" style="width: 14px;"></div> -->
            <div class="btn-news" @click="jiaonyi()"></div>
            <div class="btn-refresh" @click="$router.go(0)"></div>
          </div>
          <div class="nav-btn">
            <div class="btn-jiaoyi" @click="jiaonyi()"></div>
            <!-- <div class="btn-luntan"></div> -->
            <div class="btn-tuichu" @click="dialogVisible = true" v-if="userInfo && userInfo.token"></div>
          </div>
        </div>
        <div :class="datatop == 100 ? 'info-context  padding-bottom' : 'info-context'"><context></context></div>
      </template>
      <template slot="paneR">
        <!-- 模拟交易-->
        <navbottom v-if="bottomlist == 1"></navbottom>
        <!-- 锁定-->
        <footlock v-if="bottomlist == 2"></footlock>
        <!-- 登录-->
        <footlogin v-if="bottomlist == 3"></footlogin>
        <bottoms></bottoms>
      </template>
    </split-pane>
    <!-- 退出modal -->
    <el-dialog title="退出" :visible.sync="dialogVisible" width="30%">
      <span>确认退出系统？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="signout()">确 认</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <div class="looding2" v-if="!loginbtn2">站点已关闭</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import navbottom from '@/components/navbottom.vue';
import footlock from '@/components/footlock.vue';
import footlogin from '@/components/footlogin.vue';
import bottoms from '@/components/bottoms.vue';
import context from '@/components/context.vue';
export default {
  name: 'home',
  components: { context, navbottom, bottoms, footlogin, footlock },
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    bottomlisttle: state => state.bottomlist /* 底部登录 */,
    navtopheight: state => state.navtopheight /* 分隔面板高度 */,
    loginbrn: state => state.loginbrn /* 推送数据 */,
    lefttablist: state => state.isinclass,
    userInfo: state => state.userInfo
    /* 控制左侧面板显示 */
  }),
  data() {
    return {
      hashid: '',
      dialogVisible: false, //退出弹出框
      datatop: 100,
      inter: null,
      times: 0, // 时间
      disfooter: false /* 底部模拟交易显示隐藏 */,
      bottomlist: 3 /* 底部模拟交易面板显示 */,
      changecolor: true /* 主题颜色true黑色false白色 */,
      loginbtn2: true,
      heartBean: null
    };
  },
  created: function() {
    this.init()
    //监听窗口变化
    
  },
  beforeDestroy() {
    this.$socekt && this.$socekt.close()
  },
  watch: {
    /* 控制左侧面板显示*/
    lefttablist(val) {
      // console.log(val);
      if (val == 1) {
        if (!this.$svcInvoke.config._token) {
          if (localStorage.getItem('_token')) {
            this.$svcInvoke.setConf('_token', localStorage.getItem('_token'));
            return;
          } else {
            return this.jiaonyi();
          }
        }
      }
    },
    loginbrn(val) {
      if (val == false) {
        this.loginbtn2 = false;
        // this.$message.error('站点已关闭！');
      } else {
        this.loginbtn2 = true;
      }
    },
    /* 分隔面板高度*/
    navtopheight(val) {
      this.datatop = val;
    },
    bottomlisttle(val) {
      if (val == 'footlogin') {
        return (this.bottomlist = 3);
      }
      if (val == 'footlock') {
        return (this.bottomlist = 2);
      }
      if (val == 'footnav') {
        return (this.bottomlist = 1);
      }
     
    }
  },
  mounted() {
    this.contextmenu();
    this.getContactlist()
  },
	socket: {
	  onopen(e) {
      this.loadSymbol()
      this.sendHeartBean()
			// this.$socket.send({event:'bind_tf_futures_trade'});
	  },
    onmessage(data) {
        // 获取全部行情
        if (data.Cmd == 'all') {
          this.$store.commit('trade/setTicket', data.data.filter( item => !!item).map( item => item));
        }
    },
	  events: {
	    onready(data) {
	    	if (data.ticket) {
	    		Object.keys(data.ticket).forEach(key => {
	    			this.$store.commit('trade/setTicket', JSON.parse(data.ticket[key]));
	    		});
	    	}

	    	if (data.symbol) {
	    		Object.keys(data.symbol).forEach(key => {
	    			this.$store.commit('trade/setSymbol', data.symbol);
	    		});
	    	}
	    },
	    ticket(data) {
	    	this.$store.commit('trade/setTicket', data);
	    }

	  }
	},
  methods: {
    
    getContactlist() {
      this.$post('stock/contactlist', {}).then(res => {
        if (res.code == 1) {
          this.$store.commit('trade/setContactList', res.data);
          this.$store.commit('trade/setAllContactList', res.data);
          this.$post('/stock/contactlist', {exchange: ''} ).then(res => {
          let ticket = res.data.map( item => {
            let data = {}
            data.N = item.codename
            data.P =  ''
            data.S1 = ''
            data.B1 = ''
            data.S1V = ''
            data.B1V = ''
            data.HD = ''
            data.ZF = ''
            data.O = ''
            data.H = ''
            data.L = ''
            data.M  = item.contract.substring(0,2)
            data.S = item.contract.substring(2,4)
            data.C = item.contract.substring(4)
            return data
          })
          this.$store.commit('trade/setTicket', ticket);
      })
				} 
      })
    },
    init(isReInit) {
      if (localStorage.getItem('deviceid') == 'null' || !localStorage.getItem('deviceid')) {
        this.hashid =  this.createHash(18)
        this.getDeviceid()
      } else {
        this.connect(isReInit)
      }
    },
    getDeviceid() {
      this.$post('device/getdeviceid', {hashid: this.hashid}).then(res => {
        if (res.code == 1) {
          const { appid } = res.data
					localStorage.setItem('deviceid', appid);
          this.connect()
				} 
      })
    },
		createHash (hashLength) {
      if (!hashLength || typeof(Number(hashLength)) != 'number') {return;}
      let ar = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
      let hs = [];
      let hl = Number(hashLength);
      let al = ar.length;
      for (let i = 0; i < hl; i ++) {
        hs.push(ar[Math.floor(Math.random() * al)]);
      }
      return hs.join('');
    },
    connect(isReConnect) {
      if (!isReConnect) {
        this.$socket.conn(localStorage.getItem('deviceid'));
      } else {
        this.$socket.conn();
      }
    },
    loadSymbol() {
      
      this.$post('kvc/sub', {subcode: 'All', uid: localStorage.getItem('deviceid')}).then(res => {
        //
      })
		},
    sendHeartBean() {
      if (this.heartBean) {
        clearInterval(this.heartBean)
      }
      this.heartBean = setInterval( () => {
        this.$socket.send(JSON.stringify({ Cmd: 'heartbeat', uid: localStorage.getItem('deviceid') }));
      }, 5000)
      
    },
    /* 分时线 */
    fenshi() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: 'dayline' });
    },
    /* K线 */
    kline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: '1m' });
      this.$store.commit('set', { klinetime: '6000' });
    },
    /* 日线 */
    dayline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: '1d' });
      this.$store.commit('set', { klinetime: '86400000' });
    },
    /* 周线 */
    weakline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: '1w' });
      this.$store.commit('set', { klinetime: '604800000' });
    },
    /* 月线 */
    mouthline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: 'mounth' });
      this.$store.commit('set', { klinetime: 'mounth' });
    },
    // 年线
    yearline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: 'year' });
      this.$store.commit('set', { klinetime: 'year' });
    },
    /* 1线 */
    oneline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: '1m' });
      this.$store.commit('set', { klinetime: '6000' });
    },
    /* 3线 */
    threeline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: '3m' });
      this.$store.commit('set', { klinetime: '18000' });
    },
    /* 5线 */
    fiveline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: '5m' });
      this.$store.commit('set', { klinetime: '30000' });
    },
    /* 15线 */
    fifteenline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: '15m' });
      this.$store.commit('set', { klinetime: '90000' });
    },
    /* 30线 */
    halfline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: '30m' });
      this.$store.commit('set', { klinetime: '180000' });
    },
    /* 1h线 */
    hourline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: '1h' });
      this.$store.commit('set', { klinetime: '3600000' });
    },
    // 2小时
    twohourline() {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('set', { klinetab: '2h' });
      this.$store.commit('set', { klinetime: '7200000' });
    },
    resize(e) {
      this.datatop = e
      this.$store.commit('set', { navtopheight: this.datatop });
      // this.$refs['router-user'].resize();
      // this.$refs['router-kline'].resize();
      // this.$refs['router-products'].resize();
      // console.log('窗口变化！！！！，需要重新绘图！');
    },
    /* 跳转主页 */
    gethome() {
      this.$store.commit('set', { isinclass: 2 });
    },
    contextmenu() {
      document.addEventListener('visibilitychange', () => {
        // 用户息屏、或者切到后台运行 （离开页面）
        if (document.visibilityState === 'hidden') {
          if (this.inter) {
            clearInterval(this.inter)
          }
          this.inter = setInterval(() => {
            this.times++
          },1000)
        } else {
          if (this.times >= 600) {
            this.times = 0
            clearInterval(this.inter)
            window.location.reload()
          }
          this.times = 0
          clearInterval(this.inter)
          
        }
      })
    },
    /* 变换颜色*/
    changebtn() {
      this.changecolor = !this.changecolor;
      this.$store.commit('set', { changecolor: this.changecolor });
    },
    /* 模拟交易*/
    jiaonyi() {
      this.disfooter = !this.disfooter;
      if (this.disfooter == true) {
        this.datatop = 35;
        this.$store.commit('set', { navtopheight: this.datatop });
      } else {
        this.datatop = 100;
        this.$store.commit('set', { navtopheight: this.datatop });
      }
    },
    /* 退出*/
    signout() {
      //退出登录
      this.$post('/user/logout', this.param).then(res => {
        this.dialogVisible = false
        this.$store.commit('set', { bottomlist: 'footlogin' });
        this.$svcInvoke.setConf('_token', '');
        localStorage.setItem('_token', '');
        this.$store.commit('set', { isinclass: 2 });
        
      })
    }
  }
};
</script>

<style lang="less" scoped>
.looding2 {
  position: fixed;
  top: 0rem;
  left: 0rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  width: 100%;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
}
#waihui {
  height: 100vh;
}
.splitter-paneL {bottom: 25px !important;}
.nav {
  background: linear-gradient(#ddd, #fbf6f6, #ddd);
  width: 100%;
  height: 25px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .nav-img {
    width: 65%;
    min-width: 600px;
    box-sizing: border-box;
    padding-left: 5px;
    div {
      float: left;
      background: url(../assets/navimg.png) no-repeat;
      height: 16px;
      width: 16px;
      overflow: hidden;
      box-sizing: border-box;
      padding: 1px;
      margin: 3px 5px;
    }
    div:hover {
      border: 1px solid #333;
      border-radius: 3px;
    }
    .btn-back {
      background-position: -331px 0;
    }
    .btn-home {
      background-position: -347px 0;
    }
    .btn-3 {
      background-position: 0 0;
    }
    .btn-news {
      background-position: -363px 0;
    }
    .btn-refresh {
      background-position: -315px 0;
    }
    .btn-big {
      background-position: -267px 0;
    }
    .btn-small {
      background-position: -283px 0;
    }
    .btn-changecolor {
      background-position: -299px 0;
    }
    .btn-pen {
      background-position: -28px 0;
    }
    .btn-alert {
      background-position: -443px 0;
    }
    .btn-sort {
      background-position: -14px 0;
    }
    .btn-infolist {
      background-position: -459px 0;
    }
    .btn-fenshi {
      background-position: -475px 0;
    }
    .btn-kline {
      background-position: -427px 0;
    }
    .btn-dayline {
      background-position: -379px 0;
    }
    .btn-weakline {
      background-position: -395px 0;
    }
    .btn-mouthline {
      background-position: -411px 0;
    }
    .btn-yearline {
      background-position: -91px 0;
    }
    .btn-oneline {
      background-position: -75px 0;
    }
    .btn-threeline {
      background-position: -123px 0;
    }
    .btn-fiveline {
      background-position: -43px 0;
    }
    .btn-fifteenline {
      background-position: -139px 0;
    }
    .btn-halfline {
      background-position: -235px 0;
    }
    .btn-hourline {
      background-position: -251px 0;
    }
    .btn-2hourline {
      background-position: -203px 0;
    }
  }
  .nav-title {
    color: red;
    cursor: default;
    min-width: 200px;
    box-sizing: border-box;
  }
  .nav-btn {
    width: 25%;
    min-width: 150px;
    box-sizing: border-box;
    padding-right: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    div {
      height: 20px;
      width: 74px;
      background: url(../assets/btn.png) no-repeat;
      margin-left: 5px;
      box-sizing: border-box;
      padding: 1px;
    }
    .btn-jiaoyi {
      background-position: -286px 0;
    }
    .btn-luntan {
      background-position: -373px 0;
    }
    .btn-tuichu {
      background-position: -203px 0;
    }
  }
}
.info-context {
  width: 100%;
  height: calc(100% - 25px);
}
.padding-bottom {
  box-sizing: border-box;
  padding-bottom: 25px;
}
</style>
